<template>
  <el-dialog :close-on-click-modal="false" :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="规则名称：" prop="name"><el-input v-model="form.name" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="迟到早退：" prop="lateGraceMinutes">
        <span class="form-tip-text">迟到</span>
        <el-input style="width: 100px" v-model="form.lateGraceMinutes" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟，不算迟到。</span>

        <span class="form-tip-text">早退</span>
        <el-input style="width: 100px" v-model="form.earlyGraceMinutes" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟，不算早退。</span>

        <span class="form-tip-text">迟到超过</span>
        <el-input style="width: 100px" v-model="form.lateAbsentThresholdMinutes" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟，视为缺卡。</span>

        <!-- <span class="form-tip-text">早退超过</span>
        <el-input style="width: 100px" v-model="form.earlyEarlyThresholdMinutes" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟，视为早退。</span> -->
      </el-form-item>
      <el-form-item label="补卡规则：" prop="maxMakeupCardsPerMonth">
        <span class="form-tip-text">每月补卡申请次数</span>
        <el-input style="width: 100px" v-model="form.maxMakeupCardsPerMonth" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">次</span>

        <span class="form-tip-text">可申请过去</span>
        <el-input style="width: 100px" v-model="form.makeupCardValidDays" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">天的补卡，超出时间自动作废。</span>
      </el-form-item>
      <el-form-item label="加班规则：" prop="minOvertimeMinutes">
        <span class="form-tip-text">加班时长达到</span>
        <el-input style="width: 100px" v-model="form.minOvertimeMinutes" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟，才计算加班。</span>

        <span class="form-tip-text">每日加班最多</span>
        <el-input style="width: 100px" v-model="form.dayOvertimeMinutes" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟。</span>
        <span class="form-tip-text">每周加班最多</span>
        <el-input style="width: 100px" v-model="form.weekOvertimeMinutes" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟。</span>
        <span class="form-tip-text">每月加班最多</span>
        <el-input style="width: 100px" v-model="form.monthOvertimeMinutes" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟。</span>
      </el-form-item>
      <el-form-item label="弹性时间：" prop="flexibleInTime">
        <span class="form-tip-text">早到/晚到</span>
        <el-input style="width: 100px" v-model="form.flexibleInTime" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟，即可早走/晚走</span>
        <el-input style="width: 100px" v-model="form.flexibleOutTime" placeholder="请输入" type="number" size="mini"></el-input>
        <span class="form-tip-text">分钟。</span>
      </el-form-item>
      <el-form-item label="外勤打卡：" prop="isCheckWork">
        <el-radio-group v-model="form.isCheckWork">
          <el-radio :label="0">无需打卡</el-radio>
          <el-radio :label="1">使用小程序打卡</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="启用状态：" prop="enabled"><el-switch v-model="form.enabled" :active-value="1" :inactive-value="0"></el-switch></el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ruleAdd, ruleEdit } from '@/api/checkRule';

const numArrField = [
'dayOvertimeMinutes',
'earlyEarlyThresholdMinutes',
'earlyGraceMinutes',
'flexibleInTime',
'flexibleOutTime',
'lateAbsentThresholdMinutes',
'lateGraceMinutes',
'makeupCardValidDays',
'maxMakeupCardsPerMonth',
'minOvertimeMinutes',
'monthOvertimeMinutes',
'weekOvertimeMinutes'
]
export default {
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: null
    }
  },
  watch: {
    item: {
      handler(val) {
        // console.log('值改变：', val);
        this.form = val || {};
      },
      immediate: true
    },
    show: {
      handler(val) {
        val && this.resetForm('form');
      },
      immediate: true
    }
  },
  data() {
    return {
      form: {},
      rules: {
        name: [{ required: true, message: '请输入内容', trigger: ['change', 'input'] }]
      }
    };
  },
  methods: {
    submit() {
      console.log('打印当前编辑：', this.form);
      this.$refs['form'].validate((valid) => {
        if (valid) {
            numArrField.forEach(item => {
                if(this.form[item]) {
                    this.$set(this.form, item, Number(this.form[item]))
                }
            })
          if (this.form.id) {
            ruleEdit(this.form).then((res) => {
              // 验证成功-编辑
              this.$emit('change', this.form);
              this.close();
            });
          } else {
            ruleAdd(this.form).then((res) => {
              // 验证成功-新增
              this.$emit('change', this.form);
              this.close();
            });
          }
        }
      });
    },
    close() {
      this.form = {};
      this.$emit('update:show', false);
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep {
  .el-form-item__label {
    font-weight: 700;
  }
}
.form-tip-text {
  margin: 10px;
  font-size: 14px;
  color: #666;
}
</style>
